<template>
  <div class="test-drag">
    <div class="list">
      <drag v-model="list" group="set" class="drag-list" :animation="200">
        <div class="drag-item" v-for="item of list" :key="item.id">
          {{ item.name }}
        </div>
      </drag>
    </div>
    <div class="list">
      <drag v-model="list1" group="set" class="drag-list" :animation="200">
        <div class="drag-item" v-for="item of list1" :key="item.id">
          {{ item.name }}
        </div>
      </drag>
    </div>
    <div class="list">
      <drag v-model="list2" group="set" class="drag-list" :animation="200">
        <div class="drag-item" v-for="item of list2" :key="item.id">
          {{ item.name }}
        </div>
      </drag>
    </div>
  </div>
</template>
<script>
import vuedraggable from "vuedraggable";
export default {
  data() {
    return {
      list1: [],
      list2: [],
      list: [
        { id: 1, name: "小红" },
        { id: 2, name: "小明" },
        { id: 3, name: "小亮" },
        { id: 4, name: "小强" },
        { id: 5, name: "小张" },
        { id: 6, name: "小王" },
        { id: 7, name: "小李" },
        { id: 8, name: "小赵" },
      ],
    };
  },
  components: { drag: vuedraggable },
};
</script>
<style lang="scss">
.test-drag {
  display: flex;
  align-items: flex-start;
  .list {
    width: 100px;
    min-height: 200px;
    border: 1px solid #ccc;
    padding: 20px;
    margin: 10px;
    .drag-list {
      min-height: 200px;
    }
  }
  .drag-item {
    box-sizing: border-box;
    width: 100px;
    line-height: 40px;
    text-align: center;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 2px;
  }
}
</style>